<template>
  <div class="app">
    <div class="login">
      <div class="titile">
        <span>LOGO</span>
        <span class="oo"><h5>综合管理平台</h5></span>
        <span class="on">小微企业高效管理</span>
      </div>
      <div class="logins">
        <!-- { type:'string',min:2,message:'长度不能少于2位'} -->
        <el-form :model="userinfo" ref="fromRef" label-width="100px" class="demo-ruleForm">
  <el-form-item
    label="账户"
    prop="username"
  >
    <el-input type="" v-model.number="userinfo.username" autocomplete="off"></el-input>
  </el-form-item>

<el-form-item
    label="密码"
    prop="password"
  >
    <el-input type="password" v-model.number="userinfo.password" autocomplete="off"></el-input>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>

  </el-form-item>
</el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userinfo: {
        username: "",
        password: "",
      },
    };
  },
  computed: {
    rules() {
      return {
        username: [
          { required: true, message: "账户不能为空" },
          { validator: this.validateUsername, trigger: ["blur", "change"] },
        ],
        password:[{required: true, message: "密码不能为空"}]
      };
      
    },
  },
  //  validateUsername(rule, value, callback) {
  //     if (/^z/i.test(value)) {
  //       callback(new Error("不能以a开头"));
  //     } else {
  //       callback;
  //     }
  //   },
   methods: {
      submitForm() {
        this.$refs['fromRef'].validate(async(valid) => {
          // console.log(valid);
          if (valid) {
           let ret = await this.$store.dispatch('user/loginAction',this.userinfo)
           if(!ret){
                  this.$message.error('账户或者密码不正确');
           }else{
             this.$router.replace('/admin').catch(()=>{})
            console.log('后台');
           }
          } else { 
            console.log('error submit!!');
            return false;
          }
        });
      },
     
    }
};
</script>

<style lang="scss" scoped>
body,
html {
  height: 100%;
  width: 100%;
  .app {
    height: 100vh;
    background: #63b9be;
    position: relative;

    .login {
      width: 434px;
      height: 472px;
      background: inherit;
      background-color: rgba(255, 255, 255, 1);
      border: none;
      border-radius: 5px;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      margin: auto;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      position: relative;
      .titile {
        width: 234px;
        height: 48px;
        background: #63b9be;
        position: absolute;
        left: 104px;
        top: 39px;
        width: 234px;
        height: 48px;
        font-size: 12px;
        color: rgb(255, 255, 255);
        span {
          display: block;
          text-align: center;
          line-height: 48px;
        }
        .oo {
          display: block;
          position: absolute;
          left: 14px;
          top: 76px;
          bottom: 0;
          right: 0;
          width: 205px;
          height: 40px;
          font-size: 34px;
          color: rgb(51, 51, 51);
          line-height: 40px;
        }
        .on {
          position: absolute;
          top: 100px;
          left: 46px;
          right: 0;
          bottom: 0;
          width: 129px;
          height: 19px;
          font-size: 16px;
          color: rgb(153, 153, 153);
          margin-top: 10px;
        }
      }
      .el-form {
        position: absolute;
        left: 22px;
        top: 204px;
      }
      .el-button--primary {
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
        width: 100%;
      }
    }
  }
}
</style>